/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react/jsx-key */
import React, { useMemo } from "react";
import { Card, Tabs, theme, Grid } from "antd";
import Mtable from "./mtable";
import Mcard from "./mcard";
import PremButton from "../PremButton"; //权限判断fn
import {
  PlusOutlined,
  ImportOutlined,
  ExportOutlined,
} from "@ant-design/icons";

const { useBreakpoint } = Grid;

function isString(obj) {
  return obj.constructor === String ? true : false;
}

export default (props) => {
  const screens = useBreakpoint();
  const {
    token: { colorBorder },
  } = theme.useToken();

  const actionbtn = {
    add: <PremButton {...props?.addconfig}>新增</PremButton>,
    import: <PremButton {...props?.importconfig}>导入</PremButton>,
    export: <PremButton {...props?.exportconfig}>导出</PremButton>,
  };

  let mobileaddconfig = {
      ...props?.addconfig,
      btn: {
        ...props?.addconfig.btn,
        shape: "circle",
        icon: <PlusOutlined />,
        type: "primary",
      },
    },
    mobileimportconfig = {
      ...props?.importconfig,
      btn: {
        ...props?.importconfig.btn,
        shape: "circle",
        icon: <ImportOutlined />,
        type: "primary",
      },
    },
    mobileexportconfig = {
      ...props?.exportconfig,
      btn: {
        ...props?.exportconfig.btn,
        shape: "circle",
        icon: <ExportOutlined />,
        type: "primary",
      },
    };
  const mobilebtn = {
    add: <PremButton {...mobileaddconfig}></PremButton>,
    import: <PremButton {...mobileimportconfig}></PremButton>,
    export: <PremButton {...mobileexportconfig}></PremButton>,
  };

  //右上角 pageextra 类型 1.reactDom 2.string 以逗号隔开 为none时不显示
  const renderextra = (type) => {
    if (props.pageextra && !isString(props.pageextra)) {
      if (typeof props?.pageextra == "function") {
        return props.pageextra?.();
      } else {
        return props.pageextra;
      }
    } else if (props.pageextra === "none") {
      return <div style={{ height: 28, width: 64 }} />;
    } else if (props.pageextra) {
      let strarr = props.pageextra ? props.pageextra.split(",") : ["add"];
      return strarr.map((it, i) => {
        return (
          <div key={i} style={{ marginRight: i == strarr.length - 1 ? 0 : 6 }}>
            {type ? mobilebtn[it] : actionbtn[it]}
          </div>
        );
      });
    }
  };

  const items = useMemo(() => {
    if (props.tabList) {
      return props.tabList.map((it) => {
        const extracolumns = it?.columns
          ? {
              columns: it.columns,
            }
          : {};
        return {
          label: it.tab,
          key: it.key,
          children: (
            <>
              <div style={{ display: "flex", width: "100%" }}>
                {(props.childposition == "left" || !props.childposition) &&
                  props.children}
                <div
                  style={{
                    flex: 1,
                    overflow: "hidden",
                    paddingLeft: `${
                      props.childposition == "left" ? "15px" : "0"
                    }`,
                  }}
                >
                  {props.childposition == "top" && props.children}
                  <Mtable
                    {...props}
                    {...extracolumns}
                    iscurrent={props?.activeTabKey == it.key}
                  />
                </div>
                {(props.childposition == "right" || !props.childposition) &&
                  props.children}
              </div>
              {props.childposition == "bottom" && props.children}
            </>
          ),
        };
      });
    }
  }, [props.tabList]);

  return (
    <div className="diycard">
      {!screens?.md ? (
        <div>
          <Mcard {...props} />
          <div
            className="center"
            style={{
              flexDirection: "column",
              position: "fixed",
              right: 12,
              bottom: 36,
              width: 36,
              height: 120,
              justifyContent: "flex-start",
              alignItems: "flex-start",
              gap: 12,
            }}
          >
            {renderextra("mobile")}
          </div>
        </div>
      ) : !props.tabList ? (
        <Card
          title={props.pagetitle}
          extra={<div className="center">{renderextra()}</div>}
          activeTabKey={props.activeTabKey}
          tabList={props.tabList}
          onTabChange={props.onTabChange}
          style={{
            height: "100%",
            overflow: "visible",
            margin: 12,
            boxShadow: `${colorBorder} 0px 0px 8px 0px`,
          }}
        >
          <div style={{ display: "flex", width: "100%" }}>
            {(props.childposition == "left" || !props.childposition) &&
              !props.nochild &&
              props.children}
            <div
              style={{
                flex: 1,
                overflow: "hidden",
                paddingLeft: `${props.childposition == "left" ? "15px" : "0"}`,
              }}
            >
              {props.childposition == "top" && !props.nochild && props.children}
              <Mtable {...props} />
            </div>
            {(props.childposition == "right" || !props.childposition) &&
              !props.nochild &&
              props.children}
          </div>
          {props.childposition == "bottom" && !props.nochild && props.children}
        </Card>
      ) : (
        <div className="tabsTable">
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              padding: "16px 20px 0",
            }}
          >
            <div style={{ fontSize: 16, fontWeight: 500 }}>
              {props.pagetitle}
            </div>
            <div className="center">{renderextra()}</div>
          </div>
          <Tabs
            items={items}
            onChange={props.onTabChange}
            activeTabKey={props.activeTabKey}
          />
        </div>
      )}
    </div>
  );
};
